<template>
  <div class="tools-container">
    <div class="tools-header">
      <h1 class="tools-title">工具列表</h1>
      <div class="tools-search">
        <el-input
          v-model="searchKeyword"
          placeholder="搜索工具..."
          prefix-icon="Search"
          clearable
          @input="handleSearch"
        />
        <el-select v-model="selectedCategory" placeholder="全部分类" @change="handleCategoryChange">
          <el-option label="全部分类" value="" />
          <el-option
            v-for="category in categories"
            :key="category.id"
            :label="category.name"
            :value="category.id"
          />
        </el-select>
      </div>
    </div>

    <div class="tools-content">
      <div class="tools-sidebar">
        <h3 class="sidebar-title">工具分类</h3>
        <el-menu
          :default-active="selectedCategory.toString()"
          class="category-menu"
          @select="handleCategorySelect"
        >
          <el-menu-item index="">全部工具</el-menu-item>
          <el-menu-item
            v-for="category in categories"
            :key="category.id"
            :index="category.id.toString()"
          >
            {{ category.name }}
          </el-menu-item>
        </el-menu>
      </div>

      <div class="tools-list">
        <el-empty v-if="filteredTools.length === 0" description="没有找到相关工具" />
        <div v-else class="tool-grid">
          <el-card
            v-for="tool in filteredTools"
            :key="tool.id"
            class="tool-card"
            @click="goToToolDetail(tool.id)"
          >
            <div class="tool-icon">
              <el-icon><component :is="tool.icon" /></el-icon>
            </div>
            <h3 class="tool-name">{{ tool.name }}</h3>
            <p class="tool-desc">{{ tool.description }}</p>
            <div class="tool-footer">
              <el-tag size="small" type="info">{{ getCategoryName(tool.categoryId) }}</el-tag>
              <span class="tool-views">
                <el-icon><View /></el-icon>
                {{ tool.views }}
              </span>
            </div>
          </el-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { Document, Picture, Calculator, View, Search } from '@element-plus/icons-vue'

const router = useRouter()
const searchKeyword = ref('')
const selectedCategory = ref('')

// 模拟分类数据
const categories = ref([
  { id: 1, name: '文本工具' },
  { id: 2, name: '图片工具' },
  { id: 3, name: '计算工具' },
  { id: 4, name: '开发工具' },
  { id: 5, name: '日常工具' }
])

// 模拟工具数据
const tools = ref([
  {
    id: 1,
    name: '文本格式化',
    description: '格式化JSON、XML、HTML等文本内容',
    icon: 'Document',
    categoryId: 1,
    views: 1256
  },
  {
    id: 2,
    name: '文本加密解密',
    description: '支持多种加密算法，保护您的文本安全',
    icon: 'Lock',
    categoryId: 1,
    views: 986
  },
  {
    id: 3,
    name: '图片压缩',
    description: '无损压缩图片，减小文件体积',
    icon: 'Picture',
    categoryId: 2,
    views: 2345
  },
  {
    id: 4,
    name: '图片格式转换',
    description: '支持JPG、PNG、GIF等格式互转',
    icon: 'Picture',
    categoryId: 2,
    views: 1789
  },
  {
    id: 5,
    name: '单位换算',
    description: '长度、面积、体积、重量等单位换算',
    icon: 'Calculator',
    categoryId: 3,
    views: 1432
  },
  {
    id: 6,
    name: '进制转换',
    description: '二进制、八进制、十进制、十六进制转换',
    icon: 'Calculator',
    categoryId: 3,
    views: 876
  },
  {
    id: 7,
    name: '代码格式化',
    description: '格式化美化各种编程语言代码',
    icon: 'Document',
    categoryId: 4,
    views: 2156
  },
  {
    id: 8,
    name: '时间戳转换',
    description: '时间戳与日期时间互转',
    icon: 'Timer',
    categoryId: 5,
    views: 1678
  }
])

// 过滤工具列表
const filteredTools = computed(() => {
  return tools.value.filter(tool => {
    const matchCategory = selectedCategory.value === '' || tool.categoryId.toString() === selectedCategory.value
    const matchKeyword = tool.name.toLowerCase().includes(searchKeyword.value.toLowerCase()) ||
                         tool.description.toLowerCase().includes(searchKeyword.value.toLowerCase())
    return matchCategory && matchKeyword
  })
})

// 获取分类名称
const getCategoryName = (categoryId: number) => {
  const category = categories.value.find(c => c.id === categoryId)
  return category ? category.name : '未分类'
}

// 处理搜索
const handleSearch = () => {
  // 实际项目中可能需要调用API进行搜索
}

// 处理分类变更
const handleCategoryChange = (value: string) => {
  // 实际项目中可能需要调用API获取该分类下的工具
}

// 处理分类选择
const handleCategorySelect = (index: string) => {
  selectedCategory.value = index
}

// 跳转到工具详情页
const goToToolDetail = (id: number) => {
  router.push(`/tool/${id}`)
}
</script>

<style scoped>
.tools-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.tools-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

.tools-title {
  font-size: 2rem;
  color: #303133;
  margin: 0;
}

.tools-search {
  display: flex;
  gap: 10px;
}

.tools-content {
  display: flex;
  gap: 20px;
}

.tools-sidebar {
  width: 200px;
  flex-shrink: 0;
}

.sidebar-title {
  margin-top: 0;
  padding: 10px;
  border-bottom: 1px solid #ebeef5;
}

.category-menu {
  border-right: none;
}

.tools-list {
  flex: 1;
}

.tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.tool-card {
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
  height: 100%;
}

.tool-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.tool-icon {
  font-size: 2rem;
  color: #409eff;
  margin-bottom: 15px;
  text-align: center;
}

.tool-name {
  font-size: 1.2rem;
  margin-bottom: 10px;
  color: #303133;
}

.tool-desc {
  color: #606266;
  font-size: 0.9rem;
  margin-bottom: 15px;
}

.tool-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
}

.tool-views {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #909399;
  font-size: 0.8rem;
}

@media (max-width: 768px) {
  .tools-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  
  .tools-content {
    flex-direction: column;
  }
  
  .tools-sidebar {
    width: 100%;
    margin-bottom: 20px;
  }
}
</style> 